<template>
  <Menu active-name="1" theme="dark" width="auto" @on-select="open" :accordion="true">
    <div class="layout-logo-left">
      <p class="jkhaled-logo">Meeting-Room-Admin</p>
    </div>
    <Submenu :name="item.id" v-for="item in forces" :key="item.id + item.force_name">
      <template slot="title">
        <Icon :type="getIcon(item.force_icon)"></Icon>
        <span class="layout-text">{{item.force_name}}</span>
      </template>
      <Menu-item :name="item.force_url + m.force_url" v-for="m in item.sonForces" :key="m.id + m.force_name">
        <Icon :type="getIcon(m.force_icon)"></Icon>
        <span class="layout-text">{{m.force_name}}</span>
      </Menu-item>
    </Submenu>
  </Menu>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'
  import userApi from '@/api/userApi'

  export default {
    props: ['spanLeft'],
    data() {
      return {
        forces: []
      }
    },
    computed: {
      ...mapState([
        'me'
      ]),
      iconSize() {
        return this.spanLeft === 4 ? 14 : 28;
      }
    },
    methods: {
      ...mapMutations([
        'updateMe'
      ]),
      getIcon(iconHtml) {
        var arr = iconHtml.toString()
          .split('"')
        return (arr && arr.length > 1) ? arr[1] : ''
      },
      open(name) {
        this.$router.push(name)
      }
    },
    updated() {},
    mounted() {
      var token = sessionStorage.getItem('token')
      if (token && !this.me.role) {
        // 获取当前用户信息
        userApi.me()
          .then(data => {
            this.updateMe(data)
          })
          .catch(errMsg => {
            this.$Message.error(errMsg)
          })
      } else {
        if (this.me.role)
          this.forces = this.me.role.forceList
      }
    },
    watch: {
      'me': function (curVal, oldVal) {
        if (curVal.role)
          this.forces = curVal.role.forceList
      }
    }
  }
</script>

<style>
  .jkhaled-logo {
    color: #F1F1F1;
    font-size: 26px;
    text-align: center;
  }
</style>